<template>
<div style="width:99%">
      <!-- 卡片视图 -->
    <el-card class="box-card">
        <div>
        <el-form :inline="true">
            <el-form-item>
            <el-button class="el-icon-plus" @click="handleAdd()">新增</el-button>
            </el-form-item>
        </el-form>
        </div>
        <div>
            <span>班级：</span>
            <el-select v-model="value1">
                <el-option v-for="item in options1" :key="item.value" :label="item.class" :value="item.value"></el-option>
            </el-select>
            <span style="margin-left:10px">年级：</span>
            <el-select v-model="value2" collapse-tags >
                <el-option v-for="item in options2" :key="item.value" :label="item.grade" :value="item.value"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
            <el-button slot="append" icon="el-icon-refresh-right" @click="handleRefresh"></el-button>
        </div>
    </el-card>
    <!-- 学生信息列表 -->
    <el-card>
        <el-table :data="tbData" border style="width: 100%">
            <el-table-column type="selection" width="45"></el-table-column>
            <el-table-column fixed label="序号" align="center" width="65">
                <template slot-scope="scope">{{scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column label="学号" align="center" property="studentId" width="130px"></el-table-column>
            <el-table-column label="姓名" align="center" property="studentName" width="120px"></el-table-column>
            <el-table-column label="性别" align="center" property="sex" width="80px"></el-table-column>
            <el-table-column label="身份证" align="center" property="identityCard" width="210px"></el-table-column>
            <el-table-column label="家庭住址" align="center" property="address" width="210px">
                <!-- 弹出框 -->
                <div class="slh" slot-scope="scope">
                    <el-popover trigger="hover" width="240" placement="top">
                        <p>家庭住址：{{scope.row.address}}</p>
                        <div slot="reference"><el-tag size="mini">{{scope.row.address}}</el-tag></div>
                    </el-popover>
                </div>
            </el-table-column>
            <el-table-column label="手机号" align="center" property="mobilePhone" width="160px"></el-table-column>
            <el-table-column label="微信号" align="center" property="weChat" width="160px"></el-table-column>
            <el-table-column label="班级" align="center" property="class" width="100px"></el-table-column>
            <el-table-column label="年级" align="center" property="grade" width="130px"></el-table-column>
            <el-table-column label="操作"  align="center" fixed="right" width="190px">
            <template slot-scope="scope">
                <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
            </el-table-column>
  </el-table>
    <!-- 模态框 -->
      <div>
        <el-dialog title="新增学生" :visible.sync="dialogFormVisible" >
          <el-form :model="form" :rules="rules" ref="formDemo" label-width="100px">
            <el-form-item label="学号" prop="studentId">
              <el-input v-model="form.studentId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="studentName">
               <el-input v-model="form.studentName" controls-position="right"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio v-model="form.sex" :label="1">男</el-radio>
              <el-radio v-model="form.sex" :label="2">女</el-radio>
            </el-form-item>
            <el-form-item label="身份证" prop="identityCard">
              <el-input v-model="form.identityCard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="家庭住址" prop="address">
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="手机号" prop="mobilePhone">
               <el-input v-model="form.mobilePhone" controls-position="right"></el-input>
            </el-form-item>
            <el-form-item label="微信号"  prop="weChat">
              <el-input v-model="form.weChat" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="班级"  prop="class">
              <el-input v-model="form.class" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年级" prop="grade">
              <el-input v-model="form.grade" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="handleSave">确 定</el-button>
          </div>
        </el-dialog>
      </div>
  </el-card>
  
        <div class="block">
        <el-pagination
            :current-page="pager.pageIndex"
            :page-size="pager.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pager.rowsTotal"
            background
        >
        </el-pagination>
        </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
     // 1. 验证手机号的验证规则
    var checkMobile = (rule, value, callback) => {
      // 前两位以13、15、18、17开头 后八位0-9
      const reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
      if (reg.test(value)) {
        // 验证通过
        return callback();
      }
      else{
        // 验证不通过
        callback(new Error("手机号不正确"));
      }
    };
    // 2. 验证身份证号的验证规则
    var checkIdCard = (rule, value, callback) => {
    //  1-8{2} 身份证前两位代表省直辖市自治区没有0和9
      const reg = /^[1-8]{2}[0-9]{4}[0-9]{4}((0[1-9]{1})|(1[0-2]{1}))((0[1-9]{1})|(1[0-9]{1})|(2[0-9]{1})|(3[0-1]{1}))[0-9]{3}[0-9xX]{1}$/;
      if (reg.test(value)) {
        // 验证通过
        return callback();
      }
      else{
        // 验证不通过
        callback(new Error("身份证号不正确"));
      }
    };
    // 3. 验证学号的验证规则
    var checkStudentId = (rule, value, callback) => {
      // 学号1 或2开头，最后两位为01-59的数
      const reg = /^[1-2]([0-9]{7})([0][1-9]|[1-5][0-9])$/;
      if (reg.test(value)) {
        // 验证通过
        return callback();
      }
      else{
        // 验证不通过
        callback(new Error("学号不正确"));
      }
    };
    // 4. 验证微信号的验证规则
    var checkWeChat = (rule, value, callback) => {
      // 支持6-20个字母、数字、下划线或减号，以字母开头
      const reg = /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/;
      if (reg.test(value)) {
        // 验证通过
        return callback();
      }
      else{
        // 验证不通过
        callback(new Error("微信号不正确"));
      }
    };
    return {
        pager:{
        pageIndex:1,  //当前页面
        pageSize:6,   //每页展示列表数
        rowsTotal:20  // 列表总数
      },
       // 班级和年级选择框
       options1: [
        { value: '选项1', class: '1班'}, 
        { value: '选项2', class: '2班'}, 
        { value: '选项3', class: '3班'},  
        { value: '选项4', class: '4班'}, ],
        options2: [
        { value: '选项1', grade: '2019'}, 
        { value: '选项2', grade: '2020'}, 
        { value: '选项3', grade: '2021'},  
        { value: '选项4', grade: '2022'}, ],
        value1: [],
        value2: [],
        // 表单验证规则
        rules:{
        studentName:[
            { required: true, trigger: "blur",  message: "请输入姓名"},
        ],
        studentId:[
            { required: true, trigger: "blur", message: "请输入学号"},
            { validator:checkStudentId, trigger:"blur"}
        ],
        mobilePhone:[
            { required: true, trigger: "blur", message: "请输入手机号"},
            { validator:checkMobile, trigger:"blur"}
        ],
        identityCard:[
            { required:true, trigger:"blur", message:'请输入身份证号'},
            { validator:checkIdCard, trigger:"blur"}
        ],
        weChat:[
            { required: true, trigger: "blur", message: "请输入微信号"},
            { validator:checkWeChat, trigger:"blur"}
        ]
      },
        keyword:"",
        loading: false,
        tbData: [],
        dialogFormVisible: false,
        form: {
            id: "",
            studentId:"",
            studentName:"",
            sex:"",
            identityCard:"",
            address:"",
            mobilePhone:"",
            weChat:"",
            class:"",
            grade:""
      },
    };
  },
  methods: {
    // 搜索
     handleQuery(){},
    //  刷新
     handleRefresh(){},
    //  新增
     handleAdd() {
        this.dialogFormVisible = true;
    },
    // 编辑
    handleEdit(index, row) {
      this.dialogFormVisible = true;
        // 编辑时获取当前表数组中的下标
        this.currentEditIndex = index;
    },
    // 删除学生
    handleDelete(index, row) {},
    // 取消
    handleCancel(){
        this.dialogFormVisible =false
    },
    // 保存
    handleSave(){},
  },
};
</script>
<style>
.el-card__body {
  display: flex;
  justify-content: space-between;
}
.el-table th.el-table__cell > .cell {
  padding-left: 14px !important;
}
.slh {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style> 